<template>
  <!-- 已开通城市列表页面 -->
  <div>
    <h1>开通城市</h1>
    <hr>
    <el-button type="primary" class="addBtn" @click="toAddCity">+添加城市</el-button>
    <!-- scope.row表示单个数组 -->
    <!-- scope.$index表示下表 -->
    <el-table :data="city" style="width: 100%">
      <el-table-column label="编号" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.$index }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="城市" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.city }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
         <!--  -->
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pageDiv" >
      <el-pagination background 
       :page-size="pageSize"
        layout="prev, pager, next" 
        :total="count"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>



</template>

<script>
export default {
  created() {
    this.getAllCity(this.page,this.pageSize)
  },
  data() {
    return {
      city: [],
      page: 1,
      pageSize:3,
      count:0,
    }
  },
  methods: {
    //分页
    currentChange(page){
      console.log('分页',this.page,page)
      this.page = page
      this.getAllCity(page,this.pageSize)
}, 
       //增加城市跳转路由
    toAddCity() {
      console.log('被点击了')
      this.$router.push('/setting/opencity/add')
    },
    //查询所有城市 分页未成功
    getAllCity(page,pageSize) {
      // console.log(page,pageSize);
      this.$http({
        url: '/city/getAllCity',
        methods: 'GET',
       params:{
         page,
        pageSize
       }

      })
        .then((res) => {
          console.log(res);
          this.city = res.data.data;
          this.count = res.data.count;
          // console.log( this.count);
        })
        .catch(() => {

        })
    },
    // 删除
    handleDelete(id) {
      this.$http({
        url: '/city/deleteCity',
        methods: 'GET',
        params: {
          id
        }
      })
        .then((res) => {
          console.log('删除', res)
          this.city = res.data.data
          this.getAllCity(this.page,this.pageSize)
        })
        .catch(() => {

        })
    }
  }
}

</script>
<style lang="scss" scoped>

.pageDiv {
  margin: 50px 0 0 0;
  text-align: center;
}
  h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 20px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }
  .addBtn {
    margin-bottom: 20px;
  }
</style>